<!DOCTYPE html>
<html lang="ch">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>好帮手！</title>
</head>

<body>

	<div class="body">
		<div>
			<h1 id="one">好帮手</h1>
			<div>
				<input type="text" id="T1">
				<br>
				<button onclick="f1()">自己百度</button>
				<button onclick="f2()">生成链接</button>
			</div>
			<div>
				<br>
				<input type="text" id="T2" class="copyObj"><br>
				<button onclick="f3()">复制链接</button>
			</div>
		</div>

	</div>
</body>

</html>
<style>
	h1 {
		text-align: center;
		font-size: 60px;

	}

	.body {
		height: 80vh;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	input {
		height: 60px;
		margin: 20px;
		width: 600px;
		font-size: 24px;
	}

	button {
		display: inline-block;
		padding: 15px 25px;
		font-size: 24px;
		cursor: pointer;
		text-align: center;
		text-decoration: none;
		outline: none;
		color: #fff;
		background-color: #4CAF50;
		border: none;
		border-radius: 15px;
		box-shadow: 0 9px #999;
		margin-left: 20px;
	}

	button:hover {
		background-color: #3e8e41
	}

	button:active {
		background-color: #3e8e41;
		box-shadow: 0 5px #666;
		transform: translateY(4px);
	}

	.box {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.form-group {
		position: relative;
		font-size: 18px;
		color: #666;
		width: 50%;
		margin-right: 20px;
	}

	.form-group+.form-group {
		/* margin-top: 30px; */

	}

	.form-group .form-label {
		position: absolute;
		z-index: 1;
		left: 0;
		top: 5px;
		-webkit-transition: 0.3s;
		transition: 0.3s;
	}

	.form-group .form-control {
		width: 100%;
		position: relative;
		z-index: 3;
		height: 35px;
		background: none;
		border: none;
		padding: 5px 0;
		-webkit-transition: 0.3s;
		transition: 0.3s;
		border-bottom: 1px solid #777;
		font-size: 20px;
	}

	.form-group .form-control:invalid {
		outline: none;
	}

	.form-group .form-control:focus,
	.form-group .form-control:valid {
		outline: none;
		color: #9932cc;
		box-shadow: 0 1px DarkOrchid;
		border-color: DarkOrchid;
	}

	.form-group .form-control:focus+.form-label,
	.form-group .form-control:valid+.form-label {
		font-size: 20px;
		-ms-transform: translateY(-15px);
		-webkit-transform: translateY(-15px);
		transform: translateY(-15px);
	}

	.one {
		color: #0000FF;
	}

	.two {
		color: #00FF00;
	}

	.three {
		color: #FFFF00;
	}

	.four {
		color: #00FFFF;
	}

	.five {
		color: #CC9933;
	}

	.six {
		color: #FF66CC;
	}

	.seven {
		color: #00FF00;
	}
</style>
<script>
	let bUrl = "https://www.baidu.com/s?ie=UTF-8&wd="
	let myUrl = "http://qr.a2dc.cn/goodHelper?id="
	let i = 0;
	let color = ["one", "two", "three", "four", "five", "six", "seven"];
	window.onload = function () {
		setInterval(changeColor, 50);
		if (getQueryVariable("id") != "") {
			setInput("T1", decrypt(getQueryVariable("id")))
			setInput("T2", myUrl + getQueryVariable("id"))
		}
	}

	function changeColor() {
		var n = document.getElementById("one");
		n.className = color[i];
		if (i < color.length - 1) {
			i++;
		} else {
			i = 0;
		}
	}

	function f1() {
		window.location.href = bUrl + getInput(`T1`)
	}
	function f2() {
		setInput("T2", myUrl + encryption(getInput("T1")))
	}
	function f3() {
		copy_url();
	}

	function setInput(id, val) {
		document.getElementById(id).value = val
	}
	function getInput(id) {
		return document.getElementById(id).value;
	}
	function encryption(str) {
		var enc = window.btoa(encodeURI(str));
		return enc;
	}

	function decrypt(enc) {
		var dec = decodeURI(window.atob(enc));
		return dec;
	}

	function getQueryVariable(variable) {
		var query = window.location.search.substring(1);
		var vars = query.split("&");
		for (var i = 0; i < vars.length; i++) {
			var pair = vars[i].split("=");
			if (pair[0] == variable) { return pair[1]; }
		}
		return (false);
	}

	function copy_url() {
		let url = document.querySelector(".copyObj");
		url.select(); // 选择对象
		document.execCommand("Copy");
		alert("复制成功！")
	}



</script>